<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
</head>
<body>      
    <div id="all">
        <select id="year-select"> </select>
        <select id="month-select"> </select>
        <select id="day-select"></select>
        <select id="hour-select"></select>
        <select id="minite-select"></select>
        <select id="second-select"></select>
    </div>
    <p id="result-wrapper"></p>
</body>
</html>
<script>
   var nian =  document.getElementById('year-select');
   var yue =  document.getElementById('month-select');
   var day =  document.getElementById('day-select');
   var hour =  document.getElementById('hour-select');
   var minite =  document.getElementById('minite-select');
   var second =  document.getElementById('second-select');
   var nianOption = '', yueOption = '';dayOption = '',hourOption='',miniteOption='',secondOption='';
   
   tianchong()
   document.getElementById('all').addEventListener('change',function(){
    setInterval(duibi,1000)
    //  duibi();
   })

   yue.onchange = function(){//月
       var nainfen = nian.options[nian.selectedIndex].value;
       var yuefen = yue.options[yue.selectedIndex].value;
       var ri = 0;
       if(yuefen == 1 || yuefen == 3 || yuefen == 5 || yuefen == 7 || yuefen ==8 || yuefen ==10 || yuefen ==12){
           ri = 31;
       }else if(yuefen == 4 || yuefen == 6 || yuefen == 9 || yuefen == 11){
           ri = 30;
       }else{
           if(runnian(nainfen)){
               ri = 29;
           }else{
               ri = 28;
           }
           console.log(yuefen,'333')
       }
        for(let j =0;j<ri;j++){
            var b = j ;
            if((j+1)< 10){
              b = '0' + (j+1)
            }
            dayOption +=  `<option value="${b}">${b}日</option>`
        }
           day.innerHTML =  dayOption;
   
   }

function duibi(){//对比时间
    var s_nian = nian.options[nian.selectedIndex].value;
    var s_yue = yue.options[yue.selectedIndex].value;
    var s_ri = day.options[day.selectedIndex].value;
    var s_shi = hour.options[hour.selectedIndex].value;
    var s_fen = minite.options[minite.selectedIndex].value;
    var s_miao = second.options[second.selectedIndex].value;
    var n_time =  s_nian + '-'+ s_yue + '-'+ s_ri + '  ' + s_shi + ':' + s_fen + ':' + s_miao;
    var x_time = new Date(n_time).getTime();
    var y_time = new Date().getTime();
    var c = x_time - y_time;
    var neirong = document.getElementById('result-wrapper');
    var z_tain =  parseInt(c/(1000*60*60*24));
    var tian_y = c % (1000*60*60*24);
    var z_hour = parseInt(tian_y/(1000*60*60));
    var hour_y = tian_y % (1000*60*60);
    var z_fen = parseInt(hour_y/(1000*60));
    var fen_y = hour_y % (1000*60);
    var z_miao = parseInt(fen_y /1000);
    if(c > 0){
         neirong.innerHTML = `现在所选时间为：${n_time}据所选时间还有：${z_tain}天${z_hour}时${z_fen}分${z_miao}秒`; 
    }else{
         z_tain = -z_tain;z_hour = -z_hour;z_fen = -z_fen; z_miao = -z_miao;
         neirong.innerHTML = `现在所选时间为：${n_time}据所选时间已过去：${z_tain}天${z_hour}时${z_fen}分${z_miao}秒`;
    }
}
function runnian(year){//判断闰年
     if(year % 4 == 0 && year % 100 !== 0 || year % 400 == 0){
         return true
     }else{
         return false
     }
}
function tianchong(){//填充数据
        for(let i = 0;i<31;i++){
            nianOption += `<option value="${2002 + i}">${2002 + i}</option>`
        }
        nian.innerHTML =  nianOption;
        for(let k = 0;k<12;k++){
                var b = k ;
                if((k+1)< 10){
                b = '0' + (k+1)
                }
            yueOption += `<option value="${b}">${b}月</option>`
            yue.innerHTML =  yueOption;
        }
        for(let j =0;j<31;j++){
            var b = j;
            if((j+1)< 10){
              b = '0' + (j+1)
            }
            dayOption +=  `<option value="${b}">${b}日</option>`
        }
           day.innerHTML =  dayOption;
        for(let a =0;a<60;a++){
            var b = a
            if(a < 10){
                b = '0' + a
            }
            miniteOption += `<option value="${b}">${b}分</option>`
        }
        minite.innerHTML = miniteOption;
        for(let v =0;v<24;v++){
                var b = v
                if(v < 10){
                b = '0' + v
                }
                hourOption += `<option value="${b}">${b}点</option>`
            }
        hour.innerHTML =  hourOption;
        for(let s =0;s<60;s++){
            var b = s
            if(s < 10){
                b = '0' + s
            }
            secondOption += `<option value="${b}">${b}秒</option>`
        }
        second.innerHTML =  secondOption;
   }
</script>
